<template>
	<view class="box">
		<!-- 标题栏 -->
		<view class="head-box" :style="{ backgroundImage: ' url(' + formHeadImg + ')' }">
			<shopro-navbar back-icon-color="#fff" :background="{}"></shopro-navbar>
		</view>
		<!-- 表单 -->
		<view class="apply-form">
			<u-form :model="model" :rules="rules" ref="uForm" :errorType="errorType">
				<block v-for="(form, index) in formList" :key="index">
					<u-form-item v-if="form.type === 'input'" :labelStyle="labelStyle" 　 label-width="150" label-position="left" :label="form.name" :prop="`value${index}`">
						<u-input
							
							:placeholder="`请输入姓名`"
							:placeholderStyle="placeholderStyle"
							v-model="name"
							
						></u-input>
					</u-form-item>
					<u-form-item v-if="form.type === 'number'" :labelStyle="labelStyle" label-position="left" :label="form.name" :prop="`value${index}`" label-width="150">
						<u-input
							
							:placeholder="`请输入联系方式`"
							:placeholderStyle="placeholderStyle"
							v-model="phone"
							type="number"
						></u-input>
					</u-form-item>
					<u-form-item v-if="form.type === 'input'" :labelStyle="labelStyle" label-position="left" label="预约内容" :prop="`value${index}`" label-width="150">
						<u-input
							
							:placeholder="`请输入预约内容`"
							:placeholderStyle="placeholderStyle"
							v-model="content"
						></u-input>
					</u-form-item>
					<!-- <u-form-item
					
						:labelStyle="labelStyle"
						:prop="`value${index}`"
						:label="form.name"
						label-position="top"
						label-width="150"
						:borderBottom="true"
					>
						<u-upload
							:deletable="hasPostBtn"
							:placeholderStyle="placeholderStyle"
							:showProgress="false"
							@on-uploaded="uploadSuccess($event, `value${index}`)"
							@on-remove="uploadRemove($event, `value${index}`)"
							:file-list="model[`valueList${index}`]"
							:action="`${$BASE_URL}/api/common/upload`"
							:header="{token: token}"
							width="148"
							height="148"
							maxCount="1"
						></u-upload>
					</u-form-item> -->
				</block>
		
				<view class="agreement u-flex">
					<u-checkbox v-model="model.agreement" activeColor="#b095ff" shape="circle" @change="onAgreement"></u-checkbox>
					<view class="agreement-text" @tap="$Router.push({ path: '/pages/public/richtext', query: { id: 7} })">
						我已阅读并遵守
						<text class="text-underline">预约协议</text>
					</view>
				</view>
				<button class="u-reset-button save-btn"  @tap="onSubmit">确认预约</button>
			</u-form>
		</view>
		<!-- <view class="boxs">
			<view>姓名</view>
			<input v-model="name" placeholder="请输入姓名"   />
		</view>
		<view class="boxs">
			<view>电话</view>
			<input v-model="phone" placeholder="请输入手机号"   />
		</view>
		<u-form :model="model" :rules="rules" ref="uForm" :errorType="errorType">
				
			<view class="agreement u-flex">
				<u-checkbox v-model="model.agreement" activeColor="#b095ff" shape="circle" @change="onAgreement"></u-checkbox>
				<view class="agreement-text" @tap="$Router.push({ path: '/pages/public/richtext', query: { id: protocol.richtext_id } })">
					我已阅读并遵守
					<text class="text-underline">{{ protocol.name }}</text>
				</view>
			</view>
			<button class="u-reset-button save-btn" @tap="onSubmit" :disabled="isFormEnd">确认提交</button>
		</u-form> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id:'',
				name:'',
				phone:'',
				formHeadImg:'',
				model: {},
				formList: [], //返回的表单
				formHeadImg: '', //表单头部背景
				protocol: null, //协议
				isFormEnd: false, //提交成功
				hasPostBtn: false, //是否显示提交按钮
				errorType: ['message'],
				labelStyle: {
					'font-size': '28rpx',
					'font-weight': '500',
					color: '#333'
				},
				placeholderStyle: 'font-size: 28rpx;color:#c4c4c4;',
				model: {},
				inputNumber: [
					{
						required: true,
						message: '内容不能为空！',
						trigger: ['change', 'blur']
					}
				],
				inputImage: [
					{
						required: true,
						message: '请上传图片',
						trigger: ['change', 'blur']
					}
				],
				rules: {},
				token: uni.getStorageSync('token')
			}
		},
		onLoad(e) {
			this.id = e.from
			console.log(e, "值")
			// this.lvshis()
			
			
		},
		onShow() {
			this.lvshis_s()
			this.getFrom()
		},
		methods: {
			// 图
			lvshis_s() {
				this.$http('addons.article_banner', {
					id: 11,
				}).then(res => {
					console.log(res, "视频")
					if (res.code === 1) {
						this.formHeadImg = res.data[0].images_arr[0]
					}
				});
			},
			// 勾选同意
			onAgreement(e) {
				this.model.agreement = e.value;
				console.log(this.model.agreement,"66666" )
			},
			// 获取申请分销商表单
			getFrom() {
				let that = this;
				that.$http('commission.form').then(res => {
					if (res.code === 1) {
						that.protocol = res.data.apply_protocol; //表单协议同
						that.formList = res.data.apply_info; //表单
						that.hasPostBtn = res.data.apply_status; //是否显示提交按钮
						// that.formHeadImg = res.data.background_image ? res.data.background_image : this.$IMG_URL + '/imgs/commission/apply_bg.png'; //头部背景
						that.initRules(); //规则
						that.$refs.uForm.setRules(that.rules);
					}
				});
			},
			// 构建验证规则
			initRules() {
				let that = this;
				that.formList.forEach((item, index) => {
					that.model = {
						...that.model,
						...{
							[`value${index}`]: item.value ? item.value : null
						}
					}; //构造model数据
					that.model.agreement = false;
					if (item.type === 'input' || item.type === 'number') {
						//构造表单验证规则
						that.rules = {
							...that.rules,
							...{
								[`value${index}`]: that.inputNumber
							}
						};
					}
					if (item.type === 'image') {
						if (item.value) {
							let arr = [];
							arr.push({ url: item.value });
							that.model = {
								...that.model,
								...{
									[`valueList${index}`]: arr
								}
							};
						}
			
						that.rules = {
							...that.rules,
							...{
								[`value${index}`]: that.inputImage
							}
						};
					}
				});
			},
			// 提交
			onSubmit() {
				// if (!this.model.agreement) return this.$u.toast('请勾选协议');
				this.ok()
				// let that = this;
				// this.$refs.uForm.validate(valid => {
				// 	if (valid) {
						
				// 		let formData = this.formList;
				// 		formData.map((item, index) => {
				// 			item.value = that.model[`value${index}`];
				// 		});
				// 		// this.applyCommission(formData);
						
				// 	} else {
				// 		this.$u.toast('请完善表单');
				// 	}
				// });
			},
			ok() {
				if(this.name==''){
					this.$u.toast("请填写正确姓名");
				}else if(this.phone==''){
					this.$u.toast("请填写正确手机号");
				}else if(!this.model.agreement){
					this.$u.toast('请勾选协议');
				}else{
					this.$http('addons.article_order', {
						type: this.id,
						real_name:this.name,
						phone:this.phone
					}).then(res => {
						console.log(res.data, "预约")
						
						if (res.code === 1) {
							this.$u.toast(res.msg);
							setTimeout(()=>{
								uni.navigateBack()
							},1000)
							
						}
					});
				}
				
			},
		}
	}
</script>

<style lang="scss" scoped>
	.box{
		
		// padding: 30rpx;
		text-align: center;
		.boxs{
			margin-top: 100rpx;
			margin-left: 100rpx;
			// margin: auto;
			// text-align: center;
			display: flex;
			align-items: center;
			view{
				margin-right: 30rpx;
				font-size: 35rpx;
				font-weight: bold;
				
			}
			input{
				height: 60rpx;
				background-color: #fff;
				border-radius: 20rpx;
			}
		}
		.liji{
			margin-top: 100rpx;
			border: 2rpx solid #000;
			height: 80rpx;
			line-height: 80rpx;
			border-radius: 50rpx;
		}
	}
.agreement {
		margin-top: 20rpx;

		.agreement-text {
			font-size: 24rpx;
			font-weight: 500;
			color: #b095ff;
			.text-underline {
				text-decoration: underline;
			}
		}
	}

	.save-btn {
		width: 690rpx;
		line-height: 86rpx;
		background: linear-gradient(-90deg, #a36fff, #5336ff);
		box-shadow: 0px 7rpx 11rpx 2rpx rgba(124, 103, 214, 0.34);
		border-radius: 43rpx;
		font-weight: 500;
		color: #ffffff;
		margin: 30rpx auto;
	}
	.head-box {
		width: 100%;
		height: 400rpx;
		background-size: 100% auto;
		background-repeat: no-repeat;
	}
	// 表单
	.apply-form {
		width: 750rpx;
		background: #ffffff;
		border-radius: 20rpx;
		padding: 30rpx;
	
		.agreement {
			margin-top: 20rpx;
	
			.agreement-text {
				font-size: 24rpx;
				font-weight: 500;
				color: #b095ff;
				.text-underline {
					text-decoration: underline;
				}
			}
		}
	
		.save-btn {
			width: 690rpx;
			line-height: 86rpx;
			background: linear-gradient(-90deg, #a36fff, #5336ff);
			box-shadow: 0px 7rpx 11rpx 2rpx rgba(124, 103, 214, 0.34);
			border-radius: 43rpx;
			font-weight: 500;
			color: #ffffff;
			margin: 30rpx auto;
		}
	}
</style>
